.r {
  :global {
    .bg {
      @apply fixed bottom-0 left-0 right-0 top-0;
      @apply -m-4 bg-gray-600 bg-cover bg-center bg-no-repeat transition-opacity duration-700 ease-linear;

      filter: blur(5px);
    }

    .wrapper {
      @apply absolute flex flex-col items-center justify-center;

      top: 50%;
      left: 50%;
      width: 300px;
      transform: translate(-50%, -50%);
    }

    .input-wrap {
      position: relative;
      overflow: hidden;
      margin: 2rem 0;
      & input {
        position: relative;
        -webkit-text-fill-color: #eee;
        color: #eee;

        @apply rounded-3xl bg-white bg-opacity-20 tracking-wider;

        padding: 3px 14px;
        line-height: 1.8;
        backdrop-filter: blur(24px);
      }

      & * {
        outline: none;
      }
    }

    form {
      @apply flex flex-col items-center justify-center;
    }
  }
}
